<template>
  <div>
    <el-dialog :title="maintitle" :visible.sync="dialogVisible" width="70%">
      <el-form labelWidth="150px">
        <el-form-item label="项目类型" class="is-required">
          <el-select v-model="adddmaintain.repairtype" placeholder="请选择" style="width:100%">
            <el-option v-for="item in itemdata" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.repairtype.required">请选择项目类型</div>
        </el-form-item>
        <el-form-item label="维修/保养编号" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="adddmaintain.carrepairno" :disabled="disable"></el-input>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.carrepairno.required">请输入维修/保养编号</div>
          <!-- <div class="el-form-item__error" v-if="!$v.adddmaintain.carrepairno.alphaNum">
            维修/保养编号格式有误
          </div>-->
        </el-form-item>

        <el-form-item label="维修/保养费用" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="adddmaintain.amount"></el-input>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.amount.required">请输入维修/保养费用</div>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.amount.money">维修/保养费用格式有误</div>
        </el-form-item>
        <el-form-item label="商户" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="adddmaintain.shop"></el-input>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.shop.required">请输入商户</div>
        </el-form-item>
        <el-form-item label="车辆编号" class="is-required">
          <selectcarnumber @getpersonid2="getpersonid2" :itempersonid="adddmaintain.carid" :itemtype="1"></selectcarnumber>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.carid.required">请选择车辆编号</div>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="adddmaintain.carno" disabled></el-input>
        </el-form-item>
        <el-form-item label="维修/保养日期" class="is-required">
          <el-date-picker v-model="adddmaintain.repairtime" type="date" style="width:100%" placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.repairtime.required">请选择维修/保养日期</div>
        </el-form-item>
        <el-form-item label="里程数（km）" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="adddmaintain.mileage"></el-input>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.mileage.required">请输入里程数</div>
        </el-form-item>
        <el-form-item label="办理人" style="width:50%" class="is-required">
          <searchperson @getpersonid="getpersonid" :itempersonid="adddmaintain.carholder"></searchperson>
          <div class="el-form-item__error" v-if="!$v.adddmaintain.carholder.required">请选择办理人</div>
        </el-form-item>
        <el-form-item label="备注" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="adddmaintain.remark"></el-input>
        </el-form-item>
        <el-form-item label="上传附件">
          <upload2 :ispic="false" :filelimit="3" :filelink.sync="filelink" :isedit="false"></upload2>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addmaintain">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchperson from '~/components/common/searchperson.vue';
import selectcarnumber from '~/components/common/selectcarnumber.vue';
import upload2 from '~/components/common/upload2.vue';
import { required } from 'vuelidate/lib/validators';
import { regex } from 'vuelidate/lib/validators/common.js';

const money = regex('money', /^\d{1,8}(\.\d{1,2})?$/);

export default {
  validations: {
    adddmaintain: {
      repairtype: {
        required,
      },
      carrepairno: {
        required,
      },
      amount: {
        required,
        money,
      },
      shop: {
        required,
      },
      carid: {
        required,
      },
      carno: {
        required,
      },
      repairtime: {
        required,
      },
      mileage: {
        required,
      },
      carholder: {
        required,
      },

    },
  },
  components: {
    searchperson,
    selectcarnumber,
    upload2,
  },
  props: {
    itemdata: Array,
    chouseval: Array,
    chousebtn: Number,
  },
  data() {
    return {
      disable: false,
      maintitle: '添加维修/保养信息', // 标题
      dialogVisible: true,
      changeval: 0,
      adddmaintain: {
        repairtype: '', // 项目类型
        carrepairid: '', // 维修id
        carrepairno: '', // 维修保养编号
        amount: '', // 费用
        shop: '', // 商家
        carid: '', // 车辆编号
        carno: '', // 车牌号
        mileage: '', // 里程
        carholder: '', // 办理人id
        carholdername: '', // 办理人val
        repairtime: '',
        remark: '', // 时间
      },
      filelink: [],
      fielname: [],
      fileurl: [],
      ts: this.newStore(),
    };
  },
  created() {
    this.getitemval();
    if (this.chousebtn == 2) {
      this.maintitle = '修改维修/保养信息';
      this.disable = true;
    }
  },
  methods: {
    // 编辑渲染信息
    getitemval() {
      if (this.chouseval.length > 0 && this.chousebtn == '2') {
        let b = {};
        // console.log(this.chouseval, "lo");
        this.chouseval.forEach((item) => {
          b = item;
        });
        // this.adddmaintain = Object.assign({}, b.hash);
        this.adddmaintain = b.hash;
        console.log(this.adddmaintain, 'this.adddddddddddddddddddd');
        const req = {
          handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
          filetype: 'carrepair',
          mainid: this.chouseval[0].hash.carrepairno,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          console.log(req, 'req');
          if (ts.d.sflag == 'success') {
            const file = [];
            for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
              file.push(ts.d.data.operation1[i].hash);
            }
            for (let l = 0; l < file.length; l += 1) {
              this.filelink.push({ name: file[l].filename, url: file[l].fileurl });
              console.log(file, 'bbbbbbbbbbbbbb');
            }
            // console.log(a, "09090");
            // console.log(this.filelink, "22227");
          }
        });
      }
    },
    // 添加/编辑信息
    addmaintain() {
      // console.log(this.chousebtn, "999");
      this.fielname = [];
      this.fileurl = [];
      for (let m = 0; m < this.filelink.length; m += 1) {
        this.fielname.push(this.filelink[m].name);
        this.fileurl.push(this.filelink[m].url);
      }
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加该车辆维修/保养信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle:
              '0E56125B90D2898A9F595BEEBE51B7F21FE58E969E1F33E6BFF0B9210751F692',
            carrepairno: this.adddmaintain.carrepairno,
            repairtype: this.adddmaintain.repairtype,
            carid: this.adddmaintain.carid,
            carholder: this.adddmaintain.carholder,
            shop: this.adddmaintain.shop,
            mileage: this.adddmaintain.mileage,
            repairtime: this.adddmaintain.repairtime,
            amount: this.adddmaintain.amount,
            fielname: this.fielname,
            fileurl: this.fileurl,
            remark: this.adddmaintain.remark,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible = false;
              this.$emit('addmaintains', this.adddmaintain);
            }
          });
        });
      } else if (this.chousebtn == 2) {
        if (this.changeval == 1) {
          this.adddmaintain.carholdername = this.adddmaintain.carholder;
        }
        this.$confirm('是否修改该车辆维修/保养信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle:
              '0E56125B90D2898A7B4BD3DD8344865712DE6C66637945EB6ECCF324740257C4',
            carrepairno: this.adddmaintain.carrepairno,
            carrepairid: this.adddmaintain.carrepairid,
            repairtype: this.adddmaintain.repairtype,
            carid: this.adddmaintain.carid,
            carholder: this.adddmaintain.carholder,
            shop: this.adddmaintain.shop,
            mileage: this.adddmaintain.mileage,
            repairtime: this.adddmaintain.repairtime,
            amount: this.adddmaintain.amount,
            fielname: this.fielname,
            fileurl: this.fileurl,
            remark: this.adddmaintain.remark,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            console.log(req, 'resqredsfd');
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              // console.log(this.fielname);

              this.$emit('addmaintains', this.adddmaintain);
            }
          });
        });
      }
    },
    // 获取办理人
    getpersonid(val) {
      console.log();
      this.changeval = 1;
      this.adddmaintain.carholder = val.id;
      this.adddmaintain.carholdername = val.value;
    },
    // 获取车辆编号
    getpersonid2(val) {
      // console.log(val, "6767");
      this.adddmaintain.carid = val.id;
      this.adddmaintain.carno = val.id2;
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
.statusspan {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
